<template>
  <a-drawer :title="title" :width="screenWidth" @close="cancel" :visible="visible">
    <a-form-model ref="form" class="formStyle">
      <a-form-model-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <span>{{ record.username }}</span>
      </a-form-model-item>
      <a-form-model-item label="用户名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <span>{{ record.realname }}</span>
      </a-form-model-item>
      <a-form-model-item label="分配角色" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <span>{{ record.roleName }}</span>
      </a-form-model-item>
      <a-form-model-item label="分配机关" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <span>{{ record.unitId_dictText }}</span>
      </a-form-model-item>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { queryUserRole } from '@/api/api'
export default {
  data() {
    return {
      title: '详情',
      visible: false,
      screenWidth: 700,
      record: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    }
  },
  mounted() {},
  methods: {
    async show(record) {
      this.record = record
      await this.getUserRoles(record.id)
      this.visible = true
    },
    async getUserRoles(userid) {
      let { result } = await queryUserRole({ id: userid })
      this.record.roleName = result[0].name
    },
    cancel() {
      this.visible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-drawer-body {
  height: calc(100% - 55px);
  display: flex;
  flex-direction: column;
  span {
    color: #01efd8;
  }
}
</style>
